<template>
	<view class="content">
		<view class="u-skeleton">
			<header-navbar :city="city" :count="count" @pushMsg="pushMsg"></header-navbar>
			<view class="refresh-con">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
					
					<view class="top-header">
						<!-- 轮播图 -->
						<view class="wrap u-skeleton-fillet ar-swiper">
							<u-swiper :list="swiperList" mode="round" indicator-pos="bottomCenter" :circular="true" height="196" border-radius="10" interval="5000" bg-color="transparent" @click="swiperClick"></u-swiper>
						</view>
						<!-- 严谨高效专业 -->
						<view class="noun-con">
							<view class="u-skeleton-rect noun">
								<view class="icon-border"><view class="iconfont iconshandian"></view></view>
								<text>严谨专业高效</text>
							</view>
							<view class="u-skeleton-rect noun">
								<view class="icon-border"><view class="iconfont iconshhe"></view></view>
								<text>严审律师资格</text>
							</view>
							<view class="u-skeleton-rect noun">
								<view class="icon-border"><view class="iconfont iconxiaoxi-" style="margin-top: 4rpx;"></view></view>
								<text>真实律师回复</text>
							</view>
						</view>
						<!-- 图文和电话咨询 -->
						<view class="tu-wen">
							<image class="u-skeleton-fillet" :src="item.image" mode="" @click="handleConsulting(item)" v-for="(item, index) in consultingB" :key="item.id"></image>
						</view>
						<view class="category">
							<!-- 4个类别 -->
							<view class="category-img">
								<image class="u-skeleton-circle" :src="item.image" mode="" @click="handleConsulting(item)" v-for="(item, index) in consultingS" :key="item.id"></image>
							</view>
							<view class="category-info">
								<view class="info-text u-skeleton-rect">
									<text>文书服务</text>
									<text>快速审查拟订</text>
								</view>
								<view class="info-text u-skeleton-rect">
									<text>律师函</text>
									<text>线上拟订代发</text>
								</view>
								<view class="info-text u-skeleton-rect">
									<text>案件委托</text>
									<text>自由时间约见</text>
								</view>
								<view class="info-text u-skeleton-rect">
									<text>企业服务</text>
									<text>定制法务服务</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 专家律师 -->
					<view class="specialist-lawyer">
						<view class="header fw u-skeleton-rect">专家律师</view>
						<view class="lawyer-list">
							<image class="u-skeleton-fillet" v-for="item in recommended" :key="item.id" :src="item.image" mode="" @click="recommendedLawyer(item)"></image>
						</view>
					</view>
					<!-- 法律讲堂 -->
					<!-- <view class="lawyer-classroom">
						<view class="header fw u-skeleton-rect">法律讲堂</view>
						<image class="u-skeleton-fillet" src="../../static/images/dian_hua.jpg" mode=""></image>
					</view> -->
					<!-- 最新解答 -->
					<view class="new-answer">
						<view class="header fw u-skeleton-rect">最新解答</view>
						<view class="answer-con">
							<view class="answer-item">
								<view class="top">
									<view class="top-wen">
										<view class="bg-wen">问</view>
										<text class="wen">别人欠我8000块钱。现在没有证据，转账记录也没有，怎么办呀?</text>
									</view>
									<view class="user">用户 139****7766</view>
								</view>
								<view class="bootom">
									<view class="left">
										<image src="../../static/images/avatar.png" mode=""></image>
									</view>
									<view class="right">
										<text style="font-weight: 800;">刘域</text>
										<text>律师:</text>
										<text>您好，没有任何证据吗，想办法找证据可以起诉，有同事作证的话，也算是证人呢</text>
									</view>
								</view>
							</view>
							<view class="answer-item">
								<view class="top">
									<view class="top-wen">
										<view class="bg-wen">问</view>
										<text class="wen">您好，夫妻已离婚，俩小孩的抚养权归男方，现女方想要女儿的抚养权，女儿9岁，她也不喜欢爸爸，请问这种情况下，女方可以怎么解决?谢谢!但是之前是我放弃的抚养权，现在又去法院起诉，这会有胜算吗?</text>
									</view>
									<view class="user">用户 156****0976</view>
								</view>
								<view class="bootom">
									<view class="left">
										<image src="../../static/images/avatar.png" mode=""></image>
									</view>
									<view class="right">
										<text style="font-weight: 800;">黄云志</text>
										<text>律师:</text>
										<text>你好，女儿已经超过八周岁了，她有选择跟谁生活的权利了，女儿愿意随你生活，你也有能力抚养她，那么你就可以到法院起诉，要求法院判决变更抚养关系，由你来扶养女儿。法院会支持你的请求的。你按照我_上面操作就没问题。可以将女儿争取过来抚养的</text>
									</view>
								</view>
							</view>
							<view class="answer-item">
								<view class="top">
									<view class="top-wen">
										<view class="bg-wen">问</view>
										<text class="wen">你好!我现在有个事想咨询一下你，我在平安普惠贷了15万块钱，还了十- -期了，自从2020年初爆发疫情受到严重影响，到现在已有300多天末还上，现在普惠天天催还款，但一直没还，普惠现在准备起诉我了，我不知道怎么办了?会是什么结果</text>
									</view>
									<view class="user">用户 135****4369</view>
								</view>
								<view class="bootom">
									<view class="left">
										<image src="../../static/images/avatar.png" mode=""></image>
									</view>
									<view class="right">
										<text style="font-weight: 800;">陈涛</text>
										<text>律师:</text>
										<text>你好，应该写个书面的材料，和平安普惠说明现在的情况，协商分期还款或者延期还款。否则只能等到开庭，争取在开庭和解或者执行阶段和解。若协商不成被起诉也是没有办法，也就是判决你限期偿还执行你名下的财产，若没有可执行财产也就是加入限高名单。</text>
									</view>
								</view>
							</view>
							<view class="answer-item">
								<view class="top">
									<view class="top-wen">
										<view class="bg-wen">问</view>
										<text class="wen">想咨询写一份婚内忠诚保证书可以吗？</text>
									</view>
									<view class="user">用户 159****7433</view>
								</view>
								<view class="bootom">
									<view class="left">
										<image src="../../static/images/avatar.png" mode=""></image>
									</view>
									<view class="right">
										<text style="font-weight: 800;">刘龙斌</text>
										<text>律师:</text>
										<text>你好，只要双方自愿达成，就是具备法律效力的。如果有需要，我们这边可以为你代写。</text>
									</view>
								</view>
							</view>
							<view class="answer-item">
								<view class="top">
									<view class="top-wen">
										<view class="bg-wen">问</view>
										<text class="wen">本人有厦门三十年前的房产证，现在要换新的不动产证，但是以前证上有两个人名，需要两个人同时到场吗?</text>
									</view>
									<view class="user">用户 158****4636</view>
								</view>
								<view class="bootom">
									<view class="left">
										<image src="../../static/images/avatar.png" mode=""></image>
									</view>
									<view class="right">
										<text style="font-weight: 800;">陈宝鑫</text>
										<text>律师:</text>
										<text>你好，根据你的描述，属于共同产权人，通常是需要双方到场的。现在办理变更，是否仍是两个人的名字。如果是两个人的名字，有地方可以写授权书委托其中一方办理。</text>
									</view>
								</view>
							</view>
							<view class="answer-item">
								<view class="top">
									<view class="top-wen">
										<view class="bg-wen">问</view>
										<text class="wen">工程合同欠款拖了一年多了，公司帐户上没有资金也没什么资产就没办法治他了吗?</text>
									</view>
									<view class="user">用户 133****6546</view>
								</view>
								<view class="bootom">
									<view class="left">
										<image src="../../static/images/avatar.png" mode=""></image>
									</view>
									<view class="right">
										<text style="font-weight: 800;">李维</text>
										<text>律师:</text>
										<text>如暂时无财产可供执行，可以将其列入失信人名单,通常说的“黑名单”，对其限制高消费，限制乘坐飞机、高铁等，对其进行长期限制，使其无地遁形。如果有财产可供执行而故意转移拒不执行，还可以追究对方拒不执行判决、裁定罪，迫使其支付。</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 实用工具 -->
					<!-- <view class="tools">
						<view class="header fw u-skeleton-rect">实用工具</view>
						<view class="tool-con">
							<view class="tool-item u-skeleton-fillet">
								<view class="iconfont iconicon--"></view>
								<text>利息计算</text>
							</view>
							<view class="tool-item u-skeleton-fillet">
								<view class="iconfont iconyanchilixi"></view>
								<text>延迟利息</text>
							</view>
							<view class="tool-item u-skeleton-fillet">
								<view class="iconfont iconka"></view>
								<text>薪资个税</text>
							</view>
							<view class="tool-item u-skeleton-fillet">
								<view class="iconfont iconqia"></view>
								<text>其他个税</text>
							</view>
							<view class="tool-item u-skeleton-fillet">
								<view class="iconfont iconshenqing11"></view>
								<text>案件申请诉讼费</text>
							</view>
							<view class="tool-item u-skeleton-fillet">
								<view class="iconfont iconshouli"></view>
								<text>案件受理诉讼费</text>
							</view>
						</view>
					</view> -->
				 </mescroll-body>
				 
			</view>
			<lyg-popup @popupState="popupState" @navToPrivacy="navToPrivacy" title="服务协议" protocolPath='/pages/user/privacy'
			         policyPath='/pages/user/privacy' policyStorageKey="has_read_privacy"></lyg-popup>
			<app-update></app-update>
		</view>
		
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	// const jv = uni.requireNativePlugin('JG-JVerification')
	// #endif
	import AppUpdate from '@/components/app-update/app-update.vue'
	import lyg_popup from '@/components/lyg-popup/lyg-popup.vue'
	import HeaderNavbar from '@/components/header-navbar/header-navbar.vue'
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import { slideList } from '@/api/indexApi.js'
	import { getMemberInfo } from '@/api/userApi.js'
	// const url = 'https://arapp-net.oss-cn-shenzhen.aliyuncs.com/file/SourceHanSerifCN-Bold-2.ttf'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				count: 1,
				disabledClick: true,
				city: '温州',
				loading: true, // 是否显示骨架屏组件
				mescroll: null,
				upOption: {
					use: false,
					auto: false,
					page: {
					  num: 1,
					  size: 10 // 每页数据的数量,默认10
					},
					empty: {
					  use: false
					},
					toTop: {
					  src: ''
					},
					onScroll: false,
					textNoMore: '',
					textNoMore: ''
				},
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					onScroll: false,
					bgColor: '#0c2342',
					page: {
					    num: 1,
					    size: 10 // 每页数据的数量,默认10
					}
				},
				launchFlag: uni.getStorageSync('launchFlag'),
				swiperList: [
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				consultingB: [
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					}
				],
				consultingS: [
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					}
				],
				recommended: [
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					}
				],
				memberInfo: {}
			}
		},
		components: {
			HeaderNavbar,
			AppUpdate,
			lyg_popup
		},
		onLoad(options) {
			this._slideList()
			// this.loadFontFaceFromCache() // 加载字体
		},
		mounted() {
			// this.mescroll.endSuccess()
			uni.getLocation({
			    type: 'wgs84',
				geocode: true,
			    success: (res) => {
					console.log(res)
					if (uni.getSystemInfoSync().platform == 'ios') {
						this.city = res.address.city.slice(0, 2)
					} else {
						uni.request({
						    url: `https://restapi.amap.com/v3/geocode/regeo?parameters&key=af2c070493c9dcace2b241fc874849bf&location=${res.longitude},${res.latitude}`,
						    success: (result) => {
						        console.log(result.data)
								let data = result.data.regeocode
								this.city = data.addressComponent.city.slice(0, 2)
						    }
						});
					}
			        // console.log('当前位置的经度：' + res.longitude);
			        // console.log('当前位置的纬度：' + res.latitude);
			    }
			});
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		},
		methods: {
			recommendedLawyer(item) {
				console.log(item)
				uni.navigateTo({url: `/pages/lawyer/lawyer-detail?id=${item.url}`})
			},
			// 推送消息总的条数
			pushMsg(count) {
				console.log(count)
				this.count = count
			},
			// async loadFontFaceFromCache() {
			//     let tempFilePath
			//     const savedFilePath = uni.getStorageSync('Pacifico')
			//     const [error, res] = await uni.getSavedFileList()
			//     if (!error) {
			//         const fileList = res.fileList
			//         const file = fileList.find(file => file.filePath === savedFilePath)
			//         if (file) {
			//             tempFilePath = file.filePath
			//         }
			//     }
			//     if (!tempFilePath) {
			//         const [error, res] = await uni.downloadFile({
			//             url,
			//         })
			//         if (!error) {
			//             tempFilePath = res.tempFilePath
			//             uni.saveFile({
			//                 tempFilePath,
			//                 success(res) {
			//                     uni.setStorage({
			//                         key: 'Pacifico',
			//                         data: res.savedFilePath
			//                     })
			//                 }
			//             })
			//         } else {
			//             console.log('下载失败')
			//             return
			//         }
			//     } else {
			//         console.log('使用缓存资源，跳过下载步骤')
			//     }
			//     uni.loadFontFace({
			//         family: 'ar-font',
			//         source: `url("${plus.io.convertLocalFileSystemURL(tempFilePath)}")`
			//     })
			// },
			popupState(state) {
				console.log(state)
			},
			navToPrivacy(url) {
				console.log(url)
				uni.navigateTo({url: url})
			},
			async _slideList() {
				const res = await slideList()
				console.log(res.data.data.list)
				this.swiperList = res.data.data.list.filter(item => item.type == 1)
				this.consultingB = res.data.data.list.filter(item => item.type == 2)
				this.consultingS = res.data.data.list.filter(item => item.type == 3)
				this.recommended = res.data.data.list.filter(item => item.type == 4)
				this.mescroll.endSuccess(res.data.data.list, false)
				setTimeout(() => {
					this.loading = false;
				}, 300)
			},
			swiperClick(index) {
				console.log(index)
				console.log(this.swiperList[index])
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({title: '未登录',icon: 'none'})
					setTimeout(() => {
						this._login()
					}, 500)
				} else {
					if (this.swiperList[index].title === '特权') {
						const user = uni.getStorageSync('user')
						console.log(user)
						this._getMemberInfo('特权')
						// uni.navigateTo({url:`/pages/order/telephone-counseling1?type=0`})
					} else if (this.swiperList[index].title === '分享') {
						this._getMemberInfo('分享')
					} else if (this.swiperList[index].title === '充值') {
						this._getMemberInfo('充值')
						// 
					}
				}
			},
			async _getMemberInfo(item) {
				const res = await getMemberInfo()
				console.log(res)
				this.memberInfo = res.data.data
				if (item === '特权' && this.memberInfo.card.id) {
					uni.navigateTo({url: '/pages/user/svip-service'})
				} else if (item === '特权' && !this.memberInfo.card.id) {
					uni.navigateTo({url: '/pages/user/vip-service'})
				} else if (item === '充值') {
					uni.navigateTo({url: `/pages/user/recharge`})
				} else if (item === '分享') {
					uni.navigateTo({url: `/pages/user/share`})
				}
				console.log(this.memberInfo)
			},
			handleConsulting(item) {
				console.log(item)
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({title: '未登录',icon: 'none'})
					setTimeout(() => {
						this._login()
					}, 500)
				} else {
					if (item.title === '图文咨询') {
						uni.navigateTo({url:`/pages/order/telephone-counseling1?type=0`})
					} else if (item.title === '电话咨询') {
						uni.navigateTo({url:`/pages/order/telephone-counseling2?type=1`})
					} else if (item.title === '文书服务') {
						uni.navigateTo({url:`/pages/order/telephone-counseling3?type=2`})
					} else if (item.title === '律师函') {
						uni.navigateTo({url:`/pages/order/telephone-counseling4?type=3`})
					} else if (item.title === '案件委托') {
						uni.navigateTo({url:`/pages/order/telephone-counseling5?type=4`})
					} else if (item.title === '企业服务') {
						uni.navigateTo({url:`/pages/order/telephone-counseling6?type=5`})
					}
				}
			},
			// async _login() {
			// 	if (this.disabledClick) {
			// 		// #ifdef APP-PLUS
			// 		this.disabledClick = false
			// 		const res = await this.$login()
			// 		console.log(res)
			// 		if (res === 'fail') {
			// 			uni.navigateTo({url:'/pages/login/login'})
			// 		}
			// 		setTimeout(() => {
			// 			this.disabledClick = true
			// 		}, 1000)
			// 		// #endif
			// 		// #ifdef H5
			// 		uni.navigateTo({url:'/pages/login/login'})
			// 		// #endif
			// 	} else {
			// 		return
			// 	}
			// },
			async _login() {
				uni.showLoading({mask:true,title:'请稍后'})
				if (this.disabledClick) {
					// #ifdef APP-PLUS
					this.disabledClick = false
					const res = await this.$login()
					console.log(res)
					if (res === 'fail') {
						uni.removeStorageSync('token')
						uni.navigateTo({url:'/pages/login/login'})
					}
					setTimeout(() => {
						this.disabledClick = true
					}, 1000)
					uni.hideLoading()
					// #endif
					// #ifdef H5
					uni.navigateTo({url:'/pages/login/login'})
					// #endif
				} else {
					uni.hideLoading()
					return
				}
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(page) {
				this._slideList()
				setTimeout(() => {
					// this.mescroll.endSuccess(10, true)
				}, 2000)
				console.log('下拉刷新')
				console.log(page)
				// console.log(this.downOption.page)
			},
			upCallback(page) {
				console.log('加载更多')
				console.log(page)
				setTimeout(() => {
					this.mescroll.endSuccess(10, true)
				}, 2000)
				// this.messageList = this.messageList.concat(data)
				// this.mescroll && this.mescroll.endSuccess(data.length)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.top-header {
		height: 740rpx;
		background: url(../../static/images/header_bg03.jpg) no-repeat top center;
		background-size: 100%;
		.ar-swiper {
			margin: 0 34rpx 22rpx;
			padding-top: 22rpx;
		}
		.noun-con {
			display: flex;
			justify-content: space-around;
			.noun {
				display: flex;
				color: #fff;
				font-family: PingFangSC-Regular;
				font-size: 20rpx;
				align-items: center;
				.icon-border {
					width: 24rpx;
					height: 24rpx;
					border: 1rpx solid #fff;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					.iconfont {
						font-size: 16rpx;
					}
				}
				text {
					padding-left: 6rpx;
				}
			}
		}
		.tu-wen {
			margin: 30rpx 34rpx 0;
			display: flex;
			image {
				height: 170rpx;
				border-radius: 4px;
			}
			image:first-child {
				margin-right: 23rpx;
			}
		}
		.category {
			display: flex;
			flex-direction: column;
			.category-img {
				margin: 36rpx 34rpx 0;
				display: flex;
				justify-content: space-around;
				image {
					width: 107rpx;
					height: 106rpx;
				}
			}
			.category-info {
				margin: 20rpx 34rpx 0;
				display: flex;
				color: #fff;
				font-family: SourceHanSerifSC-Bold;
				font-size: 30rpx;
				.info-text {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					flex: 1;
					text:last-child {
						font-family: PingFangSC-Regular;
						font-size: 20rpx;
						line-height: 38rpx;
						color: #f5f9ff;
						opacity: 0.3;
					}
				}
			}
		}
	}
	.specialist-lawyer {
		margin: 50rpx 34rpx 0;
		.header {
			display: inline-block;
			font-family: SourceHanSerifCN-Bold;
			font-size: 38rpx;
			color: #2c313c;
			margin-bottom: 30rpx;
		}
		.lawyer-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			image {
				width: 48%;
				height: 161rpx;
				border-radius: 8rpx;
			}
			image:nth-child(2n-1) {
				margin-right: 2%;
			}
			image:nth-child(-n+2) {
				margin-bottom: 2%;
			}
		}
	}
	.lawyer-classroom {
		font-family: SourceHanSerifCN-Bold;
		font-size: 38rpx;
		color: #2c313c;
		margin: 50rpx 34rpx 0;
		image {
			width: 100%;
			height: 331rpx;
			margin-top: 30rpx;
		}
	}
	.tools {
		padding-bottom: 50rpx;
		.header {
			margin: 50rpx 34rpx 0;
			font-family: SourceHanSerifCN-Bold;
			font-size: 38rpx;
			color: #2c313c;
		}
		.tool-con {
			display: flex;
			flex-wrap: wrap;
			margin: 30rpx 34rpx 0;
			justify-content: space-between;
			.tool-item {
				width: 210rpx;
				height: 210rpx;
				background-color: #ecedf5;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				text {
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #596579;
				}
				view {
					color: #596579;
					font-size: 60rpx;
					padding-bottom: 8rpx;
				}
			}
			.tool-item:nth-child(-n+3) {
				margin-bottom: 20rpx;
			}
		}
	}
	.new-answer {
		margin: 50rpx 34rpx 0;
		.header {
			font-family: SourceHanSerifCN-Bold;
			font-size: 38rpx;
			color: #2c313c;
		}
		.answer-con {
			font-family: PingFangSC-Regular;
			margin-top: 30rpx;
			.answer-item {
				margin-bottom: 30rpx;
				.top {
					background-color: #f8f8f8;
					padding: 27rpx 14rpx 30rpx 30rpx;
					border-radius: 8rpx 8rpx 0 0;
					font-size: 28rpx;
					.top-wen {
						display: flex;
						.bg-wen {
							width: 5%;
							height: 34rpx;
							font-size: 24rpx;
							color: #fff;
							background-color: #1e6ed8;
							border-radius: 10rpx;
							text-align: center;
							line-height: 34rpx;
							margin: 4rpx 8rpx 0 0;
						}
						.wen {
							color: #666666;
							flex: 1;
						}
					}
					.user {
						text-align: right;
						padding-top: 18rpx;
						font-size: 22rpx;
						color: #999999;
					}
				}
				.bootom {
					display: flex;
					padding: 14px 0 24rpx 24rpx;
					border-bottom: 1rpx solid #f6f7f9;
					.left {
						width: 68rpx;
						height: 68rpx;
						margin-right: 28rpx;
						background-color: #ecedf5;
						border-radius: 50%;
						overflow: hidden;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.right {
						flex: 1;
						text:nth-child(1),text:nth-child(3) {
							color: #191919;
						}
						text:nth-child(2) {
							color: #979797;
							padding: 0 8rpx;
						}
					}
				}
			}
		}
	}
</style>
